<template>
  <div class="main">
    <div class="title">
      <img src="@/assets/images/teaching/kclx-ico.png" />课程练习
    </div>
    <div v-if="isLogin" class="answer-warp">
      <div class="answer-title">
        {{ curIndex + 1 }}.
        <div
          class="tag"
          v-if="
            dataObj.subsectionExamList[curIndex] != null &&
            dataObj.subsectionExamList[curIndex].questionType == '1'
          "
        >
          单选题
        </div>
        <div
          class="tag"
          v-if="
            dataObj.subsectionExamList[curIndex] != null &&
            dataObj.subsectionExamList[curIndex].questionType == '2'
          "
        >
          多选题
        </div>
        <div
          class="tag"
          v-if="
            dataObj.subsectionExamList[curIndex] != null &&
            dataObj.subsectionExamList[curIndex].questionType == '3'
          "
        >
          判断
        </div>
      </div>
      <div class="answer-content">
        {{
          dataObj.subsectionExamList[curIndex] != null
            ? dataObj.subsectionExamList[curIndex].questionTitle
            : ""
        }}
      </div>
      <div
        class="inserted"
        v-if="
          dataObj.subsectionExamList[curIndex] != null &&
          dataObj.subsectionExamList[curIndex].questionType == '1'
        "
      >
        <el-radio-group v-model="userAnswer" class="ml-4">
          <ul>
            <li
              :class="itemData.optionLabel == userAnswer ? 'active' : ''"
              v-for="itemData in dataObj.subsectionExamList[curIndex]
                .questionAnswersObj"
            >
              <el-radio-button :label="itemData.optionLabel" />
              <span
                @click="setAnswerDataXz(itemData)"
                style="cursor: pointer"
                >{{ itemData.content }}</span
              >
              <div
                class="ml20"
                v-if="
                  dataObj.subsectionExamList[curIndex] != null &&
                  dataObj.subsectionExamList[curIndex].showAnalysis == true
                "
              >
                <svg-icon
                  v-if="itemData.rightState"
                  icon-class="right"
                  size="25"
                />
                <svg-icon v-else icon-class="error" size="25" />
              </div>

              <!--            <img v-if="dataObj.subsectionExamList[curIndex]!=null&&dataObj.subsectionExamList[curIndex].showAnalysis==true&&itemData.rightState==false" src="@/assets/images/teaching/cuo-ico.png"  width="25">
            <img v-if="dataObj.subsectionExamList[curIndex]!=null&&dataObj.subsectionExamList[curIndex].showAnalysis==true&&itemData.rightState==true" src="@/assets/images/teaching/dui-ico.png" width="25">-->
            </li>
          </ul>
        </el-radio-group>
      </div>
      <!--单选、判断-->
      <div
        class="inserted"
        v-else-if="
          dataObj.subsectionExamList[curIndex] != null &&
          dataObj.subsectionExamList[curIndex].questionType == '2'
        "
      >
        <el-checkbox-group v-model="userAnswerArr" size="large">
          <ul>
            <li
              :class="
                userAnswerArr.includes(itemData.optionLabel) ? 'active' : ''
              "
              v-for="itemData in dataObj.subsectionExamList[curIndex]
                .questionAnswersObj"
            >
              <el-checkbox-button
                :label="itemData.optionLabel"
              ></el-checkbox-button>
              <span @click="setAnswerData(itemData)" style="cursor: pointer">{{
                itemData.content
              }}</span>
              <div
                class="ml20"
                v-if="
                  dataObj.subsectionExamList[curIndex] != null &&
                  dataObj.subsectionExamList[curIndex].showAnalysis == true
                "
              >
                <svg-icon
                  v-if="itemData.rightState"
                  icon-class="right"
                  size="25"
                />
                <svg-icon v-else icon-class="error" size="25" />
              </div>

              <!--              <img v-if="dataObj.subsectionExamList[curIndex]!=null&&dataObj.subsectionExamList[curIndex].showAnalysis==true&&itemData.rightState==true" src="@/assets/images/teaching/cuo-ico.png" width="25">-->
              <!--              <img v-if="dataObj.subsectionExamList[curIndex]!=null&&dataObj.subsectionExamList[curIndex].showAnalysis==true&&itemData.rightState==false" src="@/assets/images/teaching/dui-ico.png" width="25">-->
            </li>
          </ul>
        </el-checkbox-group>
      </div>
      <!--单选、判断-->
      <div
        class="inserted"
        v-else-if="
          dataObj.subsectionExamList[curIndex] != null &&
          dataObj.subsectionExamList[curIndex].questionType == '3'
        "
      >
        <!--        <el-radio-group  v-model="userAnswer" size="large" text-color="#12c83a" fill="#12c83a" class="vertical-radio-group">-->
        <!--          <ul>-->
        <!--            <li :class="userAnswer=itemData.optionLabel?'active':''"  v-for="itemData in dataObj.subsectionExamList[curIndex].questionAnswersObj">-->
        <!--              <el-radio   :label="itemData.optionLabel"></el-radio  > <span  @click="setAnswerData(itemData)" style="cursor: pointer">{{ itemData.content }}</span>-->
        <!--              <img v-if="dataObj.subsectionExamList[curIndex]!=null&&dataObj.subsectionExamList[curIndex].showAnalysis==true&&rightAnswers.indexOf(itemData.optionLabel)==-1&&userAnswerArr.includes(itemData.optionLabel)" src="@/assets/images/teaching/cuo-ico.png" width="25">-->
        <!--              <img v-if="dataObj.subsectionExamList[curIndex]!=null&&dataObj.subsectionExamList[curIndex].showAnalysis==true&&rightAnswers.indexOf(itemData.optionLabel)>-1&&userAnswerArr.includes(itemData.optionLabel)" src="@/assets/images/teaching/dui-ico.png" width="25">-->
        <!--            </li>-->
        <!--          </ul>-->
        <!--        </el-radio-group >-->

        <el-radio-group
          v-model="userAnswer"
          text-color="#12c83a"
          fill="#12c83a"
          class="vertical-radio-group"
        >
          <el-radio
            v-for="(itemData, itemIndex) in dataObj.subsectionExamList[curIndex]
              .questionAnswersObj"
            :key="itemIndex + 111111111110"
            :label="itemData.optionLabel"
            :value="itemData.optionLabel"
            size="large"
            class="vertical-radio"
            >{{ itemData.content }}
            <div
              class="ml20"
              v-if="
                dataObj.subsectionExamList[curIndex] != null &&
                dataObj.subsectionExamList[curIndex].showAnalysis == true
              "
            >
              <svg-icon
                v-if="itemData.rightState"
                icon-class="right"
                size="25"
              />
              <svg-icon v-else icon-class="error" size="25" />
            </div>
            <!--            <img  style="margin-left: 10px;" v-if="dataObj.subsectionExamList[curIndex]!=null&&dataObj.subsectionExamList[curIndex].showAnalysis==true&&itemData3.rightState==false" src="@/assets/images/teaching/cuo-ico.png"  width="25">-->
            <!--            <img  style="margin-left: 10px;" v-if="dataObj.subsectionExamList[curIndex]!=null&&dataObj.subsectionExamList[curIndex].showAnalysis==true&&itemData3.rightState==true" src="@/assets/images/teaching/dui-ico.png" width="25">-->
          </el-radio>
        </el-radio-group>
      </div>

      <div
        class="analysis-bg"
        v-if="
          dataObj.subsectionExamList[curIndex] != null &&
          dataObj.subsectionExamList[curIndex].showAnalysis == true
        "
      >
        <div class="f answer-bg">
          <div class="f1 f column jcc aic">
            <div class="bold C12c83a mb10 f20">{{ rightAnswers }}</div>
            <div class="f14">正确答案</div>
          </div>
          <div class="f1 f column jcc aic">
            <div class="bold Cda0007 mb10 f20">
              {{
                dataObj.subsectionExamList[curIndex].userAnswerStr == ""
                  ? "未作答"
                  : dataObj.subsectionExamList[curIndex].userAnswerStr
              }}
            </div>
            <div class="f14">你的答案</div>
          </div>
        </div>

        <div>
          <div class="analysis-title mt40 mb20 ml10">解析</div>
          <div
            class="line30"
            v-html="
              dataObj.subsectionExamList[curIndex] != null &&
              dataObj.subsectionExamList[curIndex].answersOntleed
            "
          ></div>
        </div>
      </div>

      <!--多选-->
      <div class="up">
        <el-button
          type="danger"
          plain
          size="mini"
          :disabled="curIndex == 0"
          @click="pre"
          >上一题</el-button
        >
        <el-button
          type="danger"
          size="mini"
          :disabled="curIndex == dataObj.subsectionExamList.length - 1"
          @click="next"
          >下一题</el-button
        >
        <el-button type="danger" size="mini" @click="saveCourseExerciseData"
          >提交</el-button
        >
      </div>
    </div>
    <div v-else class="no-login">
      <!-- 请 <span class="go-login" @click="goLogin()">登录</span> 后查看 -->
      请登录后查看
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import {
  getCourcePaperDetails,
  getCourseList,
  saveCourseExercise,
} from "@/api/course/course";
import { getUserValue } from "@/api/user/user";
import { useRouter } from "vue-router";
const radio1 = ref("1");
const checkboxGroup1 = ref(["Shanghai"]);

const props = defineProps(["dataObj"]);
const curIndex = ref(0);
const userAnswer = ref("");
const userAnswerArr = ref([]);
const rightAnswers = ref("");
const userInfo = ref(0);
let isLogin = ref(false);

const router = useRouter();

function getUserValueData() {
  getUserValue({}).then((res) => {
    userInfo.value = res;
  });
}

onMounted(() => {
  isLogin.value = localStorage.getItem("token") ? true : false;
  if (isLogin.value) getUserValueData(); // 初始化加载数据
});
function areStringsEqualAfterSorting(str1, str2) {
  // 将字符串分割成字符数组，排序，然后重新组合成字符串
  const sortedStr1 = str1.split(",").sort().join(",");
  const sortedStr2 = str2.split(",").sort().join(",");

  // 比较排序后的字符串是否相等
  return sortedStr1 === sortedStr2;
}

function saveCourseExerciseData() {
  let curData = props.dataObj.subsectionExamList[curIndex.value];
  let rightAnswerData = JSON.parse(curData.rightAnswers);
  let rightAnswerStr = "";
  for (let i = 0; i < rightAnswerData.length; i++) {
    rightAnswerStr +=
      rightAnswerStr == "" ? rightAnswerData[i] : "," + rightAnswerData[i];
  }

  let userAnswerStrTemp = "";
  for (let i = 0; i < userAnswerArr.value.length; i++) {
    userAnswerStrTemp +=
      userAnswerStrTemp == ""
        ? userAnswerArr.value[i]
        : "," + userAnswerArr.value[i];
  }
  if (curData.questionType == "1" || curData.questionType == "3") {
    userAnswerStrTemp = userAnswer.value;
  }
  let isRight = areStringsEqualAfterSorting(rightAnswerStr, userAnswerStrTemp)
    ? 1
    : 0;
  saveCourseExercise({
    stuId: userInfo.value.userId,
    paperDetailId: curData.paperDetailId,
    stuAnswers: JSON.stringify([
      {
        questionId: curData.questionId,
        answer: userAnswerStrTemp.split(",").sort().join(","),
        isRight: isRight,
      },
    ]),
    isRight: isRight,
    createBy: userInfo.value.nickName,
    updateBy: userInfo.value.nickName,
  }).then((res) => {
    submitData();
    console.log(res);
  });
}

//下一道题
function next() {
  if (curIndex.value + 1 < props.dataObj.subsectionExamList.length) {
    curIndex.value = curIndex.value + 1;
  }
  let curData = props.dataObj.subsectionExamList[curIndex.value];
  if (curData.questionType == "1") {
    userAnswer.value = curData.userAnswer ? curData.userAnswer : "";
  } else {
    userAnswerArr.value = curData.userAnswer ? curData.userAnswer : [];
  }
  sumAnswer();
}
//上一道题
function pre() {
  if (curIndex.value - 1 >= 0) {
    curIndex.value = curIndex.value - 1;
  }
  let curData = props.dataObj.subsectionExamList[curIndex.value];
  if (curData.questionType == "1") {
    userAnswer.value = curData.userAnswer ? curData.userAnswer : "";
  } else {
    userAnswerArr.value = curData.userAnswer ? curData.userAnswer : [];
  }
  sumAnswer();
}
//设置选中
function setAnswerDataXz(itemData) {
  if (userAnswer.value != itemData.optionLabel) {
    userAnswer.value = itemData.optionLabel;
  }
}
//设置多选选中
function setAnswerData(itemData) {
  let haveDa = false;
  for (let i = 0; i < userAnswerArr.value.length; i++) {
    if (userAnswerArr.value[i] == itemData.optionLabel) {
      haveDa = true;
      userAnswerArr.value.splice(i, 1);
    }
  }

  if (haveDa == false) {
    userAnswerArr.value.push(itemData.optionLabel);
  }
}
//提交数据
function submitData() {
  let curData = props.dataObj.subsectionExamList[curIndex.value];
  sumAnswer();
  curData.showAnalysis = true;
}

function goLogin() {
  router.push({
    path: "/login",
  });
}

function sumAnswer() {
  let curData = props.dataObj.subsectionExamList[curIndex.value];
  let rightAnswerData = JSON.parse(curData.rightAnswers);
  let rightAnswerStr = "";
  for (let i = 0; i < rightAnswerData.length; i++) {
    rightAnswerStr +=
      rightAnswerStr == "" ? rightAnswerData[i] : "," + rightAnswerData[i];
  }
  rightAnswers.value = rightAnswerStr;

  let userAnswerStrTemp = "";
  for (let i = 0; i < userAnswerArr.value.length; i++) {
    userAnswerStrTemp +=
      userAnswerStrTemp == ""
        ? userAnswerArr.value[i]
        : "," + userAnswerArr.value[i];
  }
  userAnswerStrTemp = userAnswerStrTemp.split(",").sort().join(",");
  if (curData.questionType == "1" || curData.questionType == "3") {
    curData.userAnswerStr = userAnswer.value;
    curData.userAnswer = userAnswer.value;
  } else {
    curData.userAnswerStr = userAnswerStrTemp;
    curData.userAnswer = userAnswerArr.value;
  }
}
</script>
<style lang="scss" scoped>
:deep(.vertical-radio-group) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  .vertical-radio {
    margin-bottom: 15px;
    /* 单选按钮文字样式 */
    .el-radio__label {
      font-size: 16px;
      color: #000;
      display: flex;
      align-items: center;
    }

    .el-radio__input.is-checked + .el-radio__label {
      color: rgba(71, 155, 251);
    }
    .el-radio__input {
      .el-radio__inner {
        width: 32px;
        height: 32px;
        border-color: #d6d6d6;

        &::after {
          width: 16px;
          height: 16px;
          background-color: rgba(71, 155, 251);
        }
      }

      &.is-checked {
        .el-radio__inner {
          border-color: rgba(71, 155, 251);
          background: #fff;
        }

        .el-radio__label {
          border-color: rgba(71, 155, 251);
          background: #fff;
        }
      }
    }
  }
}

.analysis-bg {
  padding: 20px;
  margin-top: 20px;
  .answer-sign {
    width: 32px;
    height: 32px;
    border: 1px solid #d6d6d6;
    border-radius: 50%;
    color: #6c6c6c;
    line-height: 30px;
  }
  .active-option {
    color: #12c83a;
    .answer-sign {
      background: #12c83a;
      border-color: #12c83a;
      color: #fff;
    }
  }
  .error-option {
    color: #da0007;
    .answer-sign {
      background: #da0007;
      border-color: #da0007;
      color: #fff;
    }
  }
  .answer-bg {
    background: #f7f9fc;
    border: 1px solid #ffffff;
    border-radius: 10px;
    height: 90px;
    margin-top: 70px;
  }
  .C12c83a {
    color: #12c83a;
  }
  .Cda0007 {
    color: #da0007;
  }

  .analysis-title {
    padding-left: 25px;
    background: url("@/assets/images/analysis.png") left center no-repeat;
  }
  .line30 {
    line-height: 30px;
  }

  .question-num-box {
    width: calc(100% - 40px);
    transition: height 0.5s ease;
    overflow: hidden;
    .question-num {
      width: 32px;
      height: 32px;
      border-radius: 5px;
      background: #f5f7fa;
      color: #3f4952;
      line-height: 32px;
      text-align: center;
      font-size: 14px;
      flex-shrink: 0;
      margin: 10px 20px 10px 0;
      cursor: pointer;
    }
    .error-question {
      background: rgba(240, 35, 35, 0.5) !important;
      color: #fff;
    }
    .current-question {
      background: #12c83a !important;
      color: #fff;
    }
  }
}

.main {
  width: 100%;
  background: #f6f6f6;
  box-sizing: border-box;
  padding: 0 60px 60px;
  .title {
    font-size: 18px;
    color: #26292c;
    line-height: 80px;
    display: flex;
    align-items: center;
    img {
      margin: 9px 8px 0 0;
    }
  }
  .answer-warp {
    height: 700px;
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    padding: 40px;
    border-radius: 10px;
    position: relative;
    .answer-title {
      font-size: 18px;
      color: #3c464f;
      display: flex;
      align-items: center;
      height: 22px;
      margin-bottom: 20px;
      .tag {
        font-size: 14px;
        color: #f02323;
        background: #fde9e9;
        border-radius: 4px;
        padding: 4px 12px;
        margin: 0 10px;
        height: 22px;
      }
    }
    .answer-content {
      color: #000000;
      font-size: 24px;
      margin-bottom: 50px;
    }
    .inserted {
      .el-radio-group,
      .el-checkbox-group {
        font-size: 20px !important;
        color: #111111 !important;
        ul {
          li {
            padding: 10px 20px;
            display: flex;
            align-items: center;
            ::v-deep .el-radio-button,
            ::v-deep .el-checkbox-button {
              margin-right: 15px;
              .el-radio-button__inner,
              .el-checkbox-button__inner {
                width: 32px !important;
                height: 32px !important;
                border-radius: 50% !important;
                padding: 0 !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                &:hover {
                  color: #fcffff !important;
                }
              }
              &.is-active .el-radio-button__inner,
              &.is-checked .el-checkbox-button__inner {
                background: rgba(71, 155, 251) !important;
                border-color: rgba(71, 155, 251) !important;
              }
            }
            &.active {
              color: rgba(71, 155, 251) !important;
            }
            img {
              margin-left: 15px;
            }
          }
        }
      }
    }
    .up {
      position: absolute;
      bottom: 40px;
      right: 40px;
    }
  }
}
.no-login {
  width: 100%;
  height: 200px;
  text-align: center;
  line-height: 200px;
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.2);
  .go-login {
    color: #f00;
    cursor: pointer;
  }
}
</style>
